
<template>
	<view >
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">账号绑定</block>
			</cu-custom>
			<!-- list列表 -->
			<view style="padding: 10px 10px 0  10px;">

			<view class="cu-list menu">

				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class="content">
						<text class="text-grey">缴费账号</text>
					</view>
					<view class="action">
						<input placeholder="请输入缴费账户" name="input" v-model="accFormData.account"></input>

					</view>
				</view>
			</view>
			<view class="cu-list menu">

				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
					<view class="content">
						<text class="text-grey">手机号码</text>
					</view>
					<view class="action">
						<input placeholder="请输入手机号码" name="input" v-model="accFormData.phone"></input>
					</view>
				</view>
			</view>

		</view>
		<view class="padding flex flex-direction" v-if="this.accFormData.openid === ''">
			<button class="cu-btn bg-green lg"  @click="onSubmit">确认绑定</button>
		</view>

		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import { ACCCODE } from "@/common/util/constants"
	export default {
		data() {
			return {
				toggleStatus: false,
				searchVal: '',
				loading: false,
				accFormData:{
					account:'',
					phone:'',
					code:'',
					openid:''
				},
				openUrl:'/mp/jwWebJwid/openidBind',
			};
		},
		onLoad() {

		},
		created(){
			this.accFormData.openid=this.$store.getters.openid;
		},
		methods: {
			getUrlKey(name){//获取url 参数
			   return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
			},
			onSubmit(){

				let param={account:this.accFormData.account,
							phone: this.accFormData.phone,
							openid:this.$store.getters.openid
					};

				if(!this.accFormData.account){
				    this.$tip.toast('请填写缴费账户');
				    return;
				}
				if(!this.accFormData.phone){
					this.$tip.toast('请填写手机号码');
					return;
				}
				this.$http.get(this.openUrl,{params:{account:this.accFormData.account,
						phone: this.accFormData.phone,
						openid:this.$store.getters.openid}}
					).then(res=> {

					if (res.data.success) {
						uni.setStorageSync(ACCCODE,this.accFormData.account);
						this.$store.commit('SET_ACCCODE', this.accFormData.account);
						this.$tip.success('绑定成功!')
					}else{
						this.$tip.toast(res.data.message)
					}
				}).catch(err => {
					console.log(err);
				});
			}
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
	.uni-group {
		display: flex;
		align-items: center;
	}
</style>
